<template>
  <el-row :gutter="20">
    <el-col :span="6"><div class="grid-content ep-bg-purple" >
     <el-select v-model="type" class="m-2" placeholder="筛选" size="large">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.value"
      :value="item.label"
    />
  </el-select>

    </div></el-col>
  </el-row>
  <el-input v-model="key" placeholder="请假理由" />

   <el-pagination small layout="prev, pager, next" 
   :total="total"
   :page-size="pagesize"
   :current-page="pageindex"
   @current-change="change"
    />
  <StudentListVue :data="info.list" type="2" @updateType="updateType"
  @refuse="refuse"
  ></StudentListVue>

</template>

<script setup>
import {onMounted,reactive,ref,watch} from "vue"
import {allstudent}  from '../model/leave'
import {updatetype} from '../model/leave'
import StudentListVue from "./StudentList.vue"
let total = ref(100)
let pageindex = ref(1)//第几页
let pagesize = ref(3)//显示几条
let type = ref("")//select的val值
let key = ref("")//搜索
let options = [{label:"",value:"全部"},{label:"1",value:"待审批"},
{label:"2",value:"已同意"},{label:"3",value:"已拒绝"}
]
let info = reactive({
    list :[]
})
watch([type,key],()=>{
    console.log("watch");
    console.log(type.value);
    pageindex.value = 1
    search()
})
let search = async ()=>{
    console.log("search");
    let {data} = await allstudent({
        pageindex:pageindex.value,
        pagesize:pagesize.value,
        type:type.value,
        key:key.value
    })
    info.list = data.data
    total.value = data.count
}
let change = (index)=>{
     console.log("change");
    pageindex.value = index,
    search()
}

onMounted(async()=>{
    search()
})

let  updateType =async ({item,type})=>{
    let {data} = await updatetype({
        _id:item._id,
        type,
    })
    if(data.code == 200){
       item.type = type
    }
}
let  refuse =async ({item,type})=>{
 let {data} = await updatetype({
        _id:item._id,
        type,
    })
    if(data.code == 200){
       item.type = type
    }
}
</script>